<template>
   <div class="">
       <!-- 柱状图 -->
       <div id="main" style="height: 290px; width: 550px"></div>
       <!-- 柱状图 -->
       <div id="main1" style="
         height: 290px;
         width: 550px;
         position: absolute;
         left: 0%;
         top: 50%;
       "></div>
       <!-- 表格 -->
       <div id="tableofprojects" style="
         height: 290px;
         width: 850px;
         position: absolute;
         left: 50%;
         top: 2%;
       ">
           <el-table :data="
             data.tableData.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
           " stripe style="width: 100%">
               <el-table-column prop="date" label="日期" width="180">
               </el-table-column>
               <el-table-column prop="name" label="姓名" width="180">
               </el-table-column>
               <el-table-column prop="address" label="地址"> </el-table-column>
           </el-table>
       </div>
       <!-- 分页 -->
       <div id="pageinfo" style="
         height: 290px;
         width: 600px;
         position: absolute;
         left: 58%;
         top: 82%;
       ">
           <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
               :current-page="data.currentPage" :page-sizes="[5, 10]" :page-size="data.pageSize"
               layout="total, sizes, prev, pager, next, jumper" :total="data.tableData.length">
           </el-pagination>
       </div>
   </div>
</template>
<script setup>
import { reactive, onBeforeMount, onMounted } from 'vue'
import * as echarts from 'echarts'

//创建响应式对象
const data = reactive({
   tableData: [
       {
           date: "2016-05-04",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1517 弄",
       },
       {
           date: "2016-05-01",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1519 弄",
       },
       {
           date: "2016-05-03",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1516 弄",
       },
       {
           date: "2016-05-02",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1518 弄",
       },
       {
           date: "2016-05-04",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1517 弄",
       },
       {
           date: "2016-05-01",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1519 弄",
       },
       {
           date: "2016-05-03",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1516 弄",
       },
       {
           date: "2016-05-02",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1518 弄",
       },
       {
           date: "2016-05-04",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1517 弄",
       },
       {
           date: "2016-05-01",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1519 弄",
       },
       {
           date: "2016-05-03",
           name: "王小虎",
           address: "上海市普陀区金沙江路 1516 弄",
       },
   ],
   currentPage: 1, // 当前页码
   // total: 12, // 总条数
   pageSize: 5, // 每页的数据条数
})
//每页条数改变时触发 选择一页显示多少行
function handleSizeChange(val) {
   // console.log(`每页 ${val} 条`);
   data.currentPage = 1;
   data.pageSize = val;
}
//当前页改变时触发 跳转其他页
function handleCurrentChange(val) {
   // console.log(`当前页: ${val}`);
   data.currentPage = val;
}
// 柱状图
function initCharts() {

   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById("main"));

   // 指定图表的配置项和数据
   var option = {
       title: {
           text: "月销量",
       },
       // 提示框
       tooltip: {},
       // 图例
       legend: {
           data: ["销量"],
       },
       // 表示x轴坐标
       xAxis: {
           data: ["oppo", "vivo", "iphone", "小米", "三星", "魅族"],
       },
       // 表示y轴坐标
       yAxis: {},
       //
       series: [
           {
               name: "销量",
               type: "bar",
               data: [3500, 2200, 4500, 6500, 200, 3000],
           },
       ],
   };
   myChart.setOption(option);
}
// 柱状图
function initCharts1() {
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(document.getElementById("main1"));

   // 指定图表的配置项和数据
   let option = {
       backgroundColor: "#ffffff",
       tooltip: {
           trigger: "axis",
           show: true,
           axisPointer: {
               // 坐标轴指示器，坐标轴触发有效
               type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
           },
       },
       legend: {
           show: false,
       },
       grid: {
           left: "10%",
           right: "10%",
           bottom: "10%",
           containLabel: true,
       },
       xAxis: [
           {
               splitLine: {
                   show: false,
               },
               type: "value",
               show: false,
           },
       ],
       yAxis: [
           {
               splitLine: {
                   show: false,
               },
               axisLine: {
                   //y轴
                   show: false,
               },
               type: "category",
               axisTick: {
                   show: false,
               },
               inverse: true,
               data: ["xiangmuyi", "项目二", "项目三", "项目四", "其他"],
               axisLabel: {
                   color: "#303133",
                   fontSize: 14,
               },
           },
       ],
       series: [
           {
               name: "报警次数",
               type: "bar",
               barWidth: 8, // 柱子宽度
               label: {
                   show: true,
                   position: "right", // 位置
                   color: "#303133",
                   fontSize: 14,
                   distance: 15, // 距离
                   formatter: "{c} 个", // 这里是数据展示的时候显示的数据
               }, // 柱子上方的数值
               itemStyle: {
                   borderRadius: [0, 0, 0, 0], // 圆角（左上、右上、右下、左下）

                   color: "#419fff",
               },
               data: [218, 16, 12, 8, 3],
           },
       ],
   };
   myChart.setOption(option);
}

onBeforeMount(() => {
   //组件挂载页面之前执行
})
onMounted(() => {
   //组件挂载到页面之后执行
   initCharts()
   initCharts1()
})

</script>
<style scoped>

</style>
